<template>
  <div id="FaultDispatch" class="wrap">
    <!--查询表单-->
    <el-form label-position="left" size="mini" :inline="true" :model="queryForm" label-width='90px' class="query-form">
        <el-form-item label="宽带账号">
            <el-input v-model="queryForm.kdzh" clearable placeholder=""></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="getData(1)">查询</el-button>
            <el-button type="primary" @click="clearQuery">清空</el-button>
            <el-button type="primary" @click="clickAdd()">导出</el-button>
        </el-form-item>
        <el-form-item>
            &nbsp;&nbsp;&nbsp;&nbsp;<a class="text-base" @click='query_show = !query_show; '>更多查询条件<i :class="'iconfont icon-'+query_show"></i></a>
        </el-form-item>
        <div v-show="query_show">
            <div class="input-box">
                <el-form-item label="联系人姓名">
                    <el-input v-model="queryForm.name" clearable placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="联系人电话">
                    <el-input v-model="queryForm.phone" clearable placeholder=""></el-input>
                </el-form-item>
               <el-form-item label="处理人">
                    <el-input v-model="queryForm.handler" clearable placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker
                        v-model="queryForm.createTime"
                        type="daterange"
                        style="width: 230px; margin-right: 30px;"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        :default-time="['00:00:00', '23:59:59']">
                    </el-date-picker>
                </el-form-item>
            </div>
        </div>
    </el-form>

    <!--客户表格数据展示-->
    <el-table class="table" ref="table" :data="tableData" border style="width: 100%;"
        @sort-change="sortChange" :header-cell-style="{padding: 0,height: '34px'}"
      >
      <el-table-column prop="kdzh" sortable="custom" label="宽带账号"></el-table-column>
      <el-table-column prop="name" sortable="custom" label="联系人姓名"></el-table-column>
      <el-table-column prop="phone" sortable="custom" label="联系人电话"></el-table-column>
      <el-table-column prop="handler" width="150px" sortable label="处理人"></el-table-column>
      <el-table-column prop="ghrq" width="150px" sortable label="更换日期"></el-table-column>
      <el-table-column prop="remark" sortable="custom" label="备注" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="jdsjdh" width="150px" sortable label="旧电视机顶盒"></el-table-column>
      <el-table-column prop="xdsjdh" width="150px" sortable label="新电视机顶盒"></el-table-column>
      <el-table-column prop="jgmjdh" width="150px" sortable label="旧光猫机顶盒"></el-table-column>
      <el-table-column prop="xgmjdh" width="150px" sortable label="新光猫机顶盒"></el-table-column>
      <el-table-column prop="createTime" sortable="custom" label="创建时间" width="150"></el-table-column>
      
    
    
    </el-table>

    <!--客户表格数据分页-->
    <el-pagination v-if="count" background layout="total,prev, pager, next"
        :page-size="pageSize"
        @current-change="getData"
        :current-page="currentPage"
        :total="count" style="float: right;">
    </el-pagination>
<!--新增故障单-->
    <el-dialog title="新增故障单" width="900px" @close="closeAdd" class="dialog dialogAdd" custom-class="custom-dialog"
               :visible.sync="dialogAddVisible" :close-on-click-modal='false' :modal-append-to-body='false' :modal="false">
     
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
  <div style="margin: 15px 0;"></div>
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>
      

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="export2Excel" size="mini">确 定</el-button>
      </div>
    </el-dialog>
   
   
    
  </div>
</template>

<script>
import 'viewerjs/dist/viewer.css'
import Viewer from "v-viewer/src/component.vue"
const cityOptions = ['宽带账号', '联系人姓名', '联系人电话', '处理人', '更换日期', '旧电视机顶盒', '新电视机顶盒', '旧光猫机顶盒', '新光猫机顶盒', '备注', '创建时间'];
const map = new Map();

    map.set('宽带账号','kdzh')
    map.set('联系人姓名','name')
    map.set('联系人电话','phone')
    map.set('处理人','handler')
    map.set('更换日期','ghrq')
    map.set('旧电视机顶盒','jdsjdh')
    map.set('新电视机顶盒','xdsjdh')
    map.set('旧光猫机顶盒','jgmjdh')
    map.set('新光猫机顶盒','xgmjdh')
    map.set('备注','remark')
    map.set('创建时间','createTime')

export default {
  name: 'FaultDispatch',
  components: {
    Viewer
  },
  data () {
    return {
      queryForm: {},    //  查询条件
      prop: 'createTime', //  排序属性
      order: -1,    //  排序 升序、降序
      tableData: [],    //  当前页数据
      loading: true,
      query_show: false,          //  是否显示更多查询
       dialogAddVisible: false, 
      count: '',      //  总数据条数
      currentPage: 1,//默认开始页面
      pageSize: 20,//每页的数据条数
      checkAll: false,
        checkedCities: ['宽带账号', '联系人姓名', '联系人电话', '处理人'],
        cities: cityOptions,
        isIndeterminate: true,
     addForm: {
        kdzh: '',
     },
     kdzh: '',
     dcmx:[],
     dcmxzd:[],
    }
  },
  mounted(){
    this.getData(1)
  },

  methods: {
    clickAdd(){
      this.dialogAddVisible = true
      
    },
    // 关闭新增模态框
    closeAdd(){
      this.dialogAddVisible = false
      this.checkedCities=['宽带账号', '联系人姓名', '联系人电话', '处理人']
    },
    handleCheckAllChange(val) {
      if(val){
        this.dcmx=cityOptions;
        for(var i = 0 ; i < this.dcmx.length; i++){
        this.dcmxzd.push(map.get(this.dcmx[i]))
        }
      }


        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
        this.dcmxzd=[];
      },
      handleCheckedCitiesChange(value) {
        this.dcmxzd=[];
        this.dcmx=value;
        for(var i = 0 ; i < value.length; i++){
        this.dcmxzd.push(map.get(value[i]))
        }
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        
      },
    
    //  获取表格数据
    getData(val){
      let params = {}
      let queryForm = this.deepClone(this.queryForm)
      params.currentPage = val
      params.pageSize = this.pageSize
      params.queryForm = queryForm
      params.prop = this.prop
      params.order = this.order
      this.startLoading()
      this.$post("/api/WxGzdController/getWxGzds",params, (data) => {
        this.tableData = data.list;
        this.count = data.count;
      })
    },
    //  清空查询
    clearQuery(){
        this.queryForm = {}
        this.getData(1)
    },
    // 排序
    sortChange(obj){
      this.prop = obj.prop || "createTime"
      this.order = obj.order == 'ascending' ? 1 : -1
      this.getData(1)
    },
    formatJson(filterVal, jsonData) {
　　　return jsonData.map(v => filterVal.map(j => v[j]))
　　},
    export2Excel(value) {
      let params = {}
      let queryForm = this.deepClone(this.queryForm)
      params.currentPage = 1
      params.queryForm = queryForm
      params.prop = this.prop
      params.order = this.order
      this.$post("/api/WxGzdController/getWxGzds",params, (data) => {
        console.log(data.list)
        let tableData = data.list;
        require.ensure([], () => {
  　　　　const { export_json_to_excel } = require('../vendor/Export2Excel');
  　　　　const tHeader = this.dcmx;
  　　　　const filterVal = this.dcmxzd;
  　　　　const data = this.formatJson(filterVal, tableData);
  　　　　export_json_to_excel(tHeader, data, '故障单');
          this.dialogAddVisible = false
  　　　})
      })
　  },
  
   
  }
}
</script>

<style lang="less" scoped>
  .custom-dialog{
    margin-top: 0 !important;
  }
  .dialogAdd {
    .el-input, .el-cascader, .el-select, .el-textarea {
      width: 300px;
    }
  }

  .label-box{
    display: flex;
    margin-bottom: 5px;
    .label-text{
      width: 100px;
      text-align: right;
      padding-right: 10px;
    }
    .label-value{
      flex: 1;
    }

  }
  .gzd-detail{
    td{
      vertical-align: top;
    }
  }
</style>
<style lang="less">
    .long-form .el-form-item__label{
      line-height: 16px;
    }
    #FaultDispatch .gzdxq-dialog{
      height: 74vh;
      .el-dialog__body{
        padding-top: 0;
        height: calc(100% - 34px);
        .el-tabs{
          height: 100%;
          .el-tabs__content{
            height: calc(100% - 40px);
            overflow: auto;
          }
        }
      }
    }
</style>

